<template>
  <div>
    <!-- 面包屑区域 -->
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>社区</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头部区域  -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="ActivityId" size="large" placeholder="活动ID" clearable />
      </el-col>
      <el-col :span="4">
        <el-row :gutter="100">
          <el-col :span="4">
            <el-button type="info" size="large" @click="queryActivity">
              <el-icon>
                <Search />
              </el-icon>&nbsp; 查询</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="large" @click="isSave">
              <el-icon>
                <Plus />
              </el-icon>&nbsp; 新增</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 列表区域 -->
    <el-table :data="activityList" stripe border style="width: 100%">
      <el-table-column type="index" label="#" width="40px" />
      <el-table-column prop="tpTitle" align="center" label="发起单位" />
      <el-table-column width="100px" align="center" label="商户头像">
        <template v-slot="scope">
          <img class="tpImg" :src=scope.row.tpImg alt="">
        </template>
      </el-table-column>
      <el-table-column prop="bmText" align="center" label="发布内容" />
      <el-table-column prop="time" align="center" label="背景图片">
        <template v-slot="scope">
          <img class="img" :src=scope.row.img alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize" :page-sizes="[5, 7]"
      background layout="total, sizes, prev, pager, next, jumper" :total="query.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

    <!-- 新增页面的dialog -->
    <el-dialog v-model="isDialogSave" title="新增社区消息" width="50%" align-center>
      <!-- 添加的表单区域 -->
      <el-form ref="saveRef" :model="activityForm" :rules="saveRules" label-width="120px" status-icon>
        <el-form-item label="发起单位" prop="tpTitle">
          <el-input v-model="activityForm.tpTitle" />
        </el-form-item>
        <el-form-item label="商户头像">
          <el-input v-model="activityForm.tpImg" />
        </el-form-item>
        <el-form-item label="发布内容" prop="bmText">
          <el-input v-model="activityForm.bmText" />
        </el-form-item>
        <el-form-item label="背景图片">
          <el-input v-model="activityForm.img" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isDialogSave = false">取消</el-button>
          <el-button type="primary" @click="save(saveRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑页面的dialog -->
    <el-dialog v-model="isDialogEdit" title="编辑社区消息" width="50%" align-center>
      <el-form ref="saveRef" :model="activityForm" :rules="saveRules" label-width="120px" status-icon>
        <el-form ref="saveRef" :model="activityForm" :rules="saveRules" label-width="120px" status-icon>
          <el-form-item label="发起单位" prop="tpTitle">
            <el-input v-model="activityForm.tpTitle" />
          </el-form-item>
          <el-form-item label="商户头像">
            <el-input v-model="activityForm.tpImg" />
          </el-form-item>
          <el-form-item label="发布内容" prop="bmText">
            <el-input v-model="activityForm.bmText" />
          </el-form-item>
          <el-form-item label="背景图片">
            <el-input v-model="activityForm.img" />
          </el-form-item>
        </el-form>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isDialogEdit = false">取消</el-button>
          <el-button type="primary" @click="isEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { getCommunityList, deleteCommunity, saveCommunity, querryCommunity, updateCommunity } from '@/api/communityall/community'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
  setup () {
    onMounted(() => {
      getActivityList()
    })
    // 活动列表
    const activityList = ref([])
    // 分页的查询数据
    const query = reactive({
      currentPage: 1,
      pageSize: 5,
      total: 0
    })
    // 活动数据
    const activityForm = reactive({
      tpImg: '',
      tpTitle: '',
      img: '',
      bmText: ''
    })
    // 校检规则
    const saveRules = reactive({
      tpTitle: [
        { required: true, message: '此项是必填项', trigger: 'blur' }
      ],
      bmText: [{ required: true, message: '此项是必填项', trigger: 'blur' }]
    })
    const options = [
      {
        value: 'true',
        label: '规划中'
      },
      {
        value: 'false',
        label: '已结束'
      }]
    //   查询活动的id
    const ActivityId = ref('')

    const saveRef = ref<FormInstance>()
    // 是否展开新增页面
    const isDialogSave = ref(false)
    // 是否展开编辑页面
    const isDialogEdit = ref(false)
    const handleSizeChange = (Val: number) => {
      query.pageSize = Val
    }
    const handleCurrentChange = (Val: number) => {
      query.currentPage = Val
      getActivityList()
    }
    // 编辑
    const handleUpdate = async (row: any) => {
      isDialogEdit.value = true
      const { data: res } = await querryCommunity(row.id)
      if (res.code !== 200) return ElMessage.error('数据获取异常')
      Object.assign(activityForm, res.data)
    }
    const handleDelete = (row: any) => {
      ElMessageBox.confirm(
        '此操作会永久删除数据，是否继续?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const { data: res } = await deleteCommunity(row.id)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除'
          })
        })
    }

    // 新增数据
    const save = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          const { data: res } = await saveCommunity(activityForm)
          if (res.code !== 200) return ElMessage.error(res.msg)
          getActivityList()
          //   清空表单
          isDialogSave.value = false
          formEl.resetFields()
          ElMessage.success(res.msg)
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 确认编辑提交请求按钮
    const isEdit = async () => {
      const { data: res } = await updateCommunity(activityForm)
      if (res.code !== 200) return ElMessage.error('更新数据失败')
      ElMessage.success('更新成功')
      isDialogEdit.value = false
      getActivityList()
    }

    const isSave = () => {
      isDialogSave.value = true
      activityForm.bmText = ''
      activityForm.img = ''
      activityForm.tpImg = ''
      activityForm.tpTitle = ''
    }
    // 查询所有的活动
    const getActivityList = async () => {
      const { data: res } = await getCommunityList(query.currentPage, query.pageSize)
      console.log(res)

      if (res.code !== 200) return ElMessage.error('获取数据失败，请检查网络！')
      query.total = res.data.total
      activityList.value = res.data.records
      //   console.log(res)
    }
    // 根据id查询活动
    const queryActivity = async () => {
      const { data: res } = await querryCommunity(ActivityId.value)
      if (res.code !== 200) return ElMessage.error('查询失败！')
      activityList.value = res.data
      ElMessage.success('查询成功！')
    }

    return {
      query,
      isDialogEdit,
      isDialogSave,
      handleSizeChange,
      handleCurrentChange,
      handleUpdate,
      handleDelete,
      activityForm,
      save,
      isEdit,
      activityList,
      saveRules,
      isSave,
      getActivityList,
      options,
      saveRef,
      ActivityId,
      queryActivity
    }
  }
})
</script>

<style lang="less" scoped>
.tpImg {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.img {
  width: 100px;
  height: 50px;
}
</style>
